<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
    <div ng-include="headerInclude"></div>

    <div
      ng-controller="Apiman.NotificationController"
      class="page container-pf-nav-pf-vertical"
      data-field="page"
      ng-cloak=""
      ng-show="pageState == 'loaded'"
    >
      <div ng-include="'plugins/api-manager/html/notifications/notifications_bc.include'"></div>
      <div
        class="alert alert-info"
        ng-show="notificationSearchResult.totalSize <= 0"
      >
        You don't have any unread notifications 🥳
      </div>

      <!--      <div class="container-fluid">-->
      <!--        <div class="row toolbar-pf">-->
      <!--          <div class="col-sm-12">-->
      <!--            <form class="toolbar-pf-actions">-->
      <!--              <div class="form-group toolbar-pf-filter">-->
      <!--                <label class="sr-only" for="filter">Name</label>-->
      <!--                <div class="input-group">-->
      <!--                  <div class="input-group-btn">-->
      <!--                    <button-->
      <!--                      type="button"-->
      <!--                      class="btn btn-default dropdown-toggle"-->
      <!--                      id="input-filter-button"-->
      <!--                      data-toggle="dropdown"-->
      <!--                      aria-haspopup="true"-->
      <!--                      aria-expanded="false"-->
      <!--                    >-->
      <!--                      Name <span class="caret"></span>-->
      <!--                    </button>-->
      <!--                    <ul class="dropdown-menu">-->
      <!--                      <li class="selected"><a href="#">Name</a></li>-->
      <!--                      <li><a href="#">Type</a></li>-->
      <!--                      <li><a href="#">Color</a></li>-->
      <!--                    </ul>-->
      <!--                  </div>-->
      <!--                  &lt;!&ndash; /btn-group &ndash;&gt;-->
      <!--                  <input-->
      <!--                    type="text"-->
      <!--                    class="form-control"-->
      <!--                    id="filter"-->
      <!--                    placeholder="Filter By Name..."-->
      <!--                  />-->
      <!--                </div>-->
      <!--                &lt;!&ndash; /input-group &ndash;&gt;-->
      <!--              </div>-->
      <!--              <div class="form-group">-->
      <!--                <div class="dropdown btn-group">-->
      <!--                  <button-->
      <!--                    type="button"-->
      <!--                    class="btn btn-default dropdown-toggle"-->
      <!--                    id="filter-button"-->
      <!--                    data-toggle="dropdown"-->
      <!--                    aria-haspopup="true"-->
      <!--                    aria-expanded="false"-->
      <!--                  >-->
      <!--                    Name <span class="caret"></span>-->
      <!--                  </button>-->
      <!--                  <ul class="dropdown-menu">-->
      <!--                    <li class="selected"><a href="#">Name</a></li>-->
      <!--                    <li><a href="#">Type</a></li>-->
      <!--                    <li><a href="#">Last Modified</a></li>-->
      <!--                  </ul>-->
      <!--                </div>-->
      <!--                <button class="btn btn-link" type="button">-->
      <!--                  <span class="fa fa-sort-alpha-asc"></span>-->
      <!--                </button>-->
      <!--              </div>-->
      <!--              <div class="form-group">-->
      <!--                <button class="btn btn-default" type="button">Action</button>-->
      <!--                <button class="btn btn-default" type="button">Action</button>-->
      <!--                <div class="dropdown btn-group dropdown-kebab-pf">-->
      <!--                  <button-->
      <!--                    class="btn btn-link dropdown-toggle"-->
      <!--                    type="button"-->
      <!--                    id="dropdownKebab"-->
      <!--                    data-toggle="dropdown"-->
      <!--                    aria-haspopup="true"-->
      <!--                    aria-expanded="true"-->
      <!--                  >-->
      <!--                    <span class="fa fa-ellipsis-v"></span>-->
      <!--                  </button>-->
      <!--                  <ul class="dropdown-menu" aria-labelledby="dropdownKebab">-->
      <!--                    <li><a href="#">Action</a></li>-->
      <!--                    <li><a href="#">Another Action</a></li>-->
      <!--                    <li><a href="#">Something Else Here</a></li>-->
      <!--                    <li role="separator" class="divider"></li>-->
      <!--                    <li><a href="#">Separated Link</a></li>-->
      <!--                  </ul>-->
      <!--                </div>-->
      <!--              </div>-->

      <!--              <div class="toolbar-pf-action-right">-->
      <!--                <div class="form-group toolbar-pf-find">-->
      <!--                  <button class="btn btn-link btn-find" type="button">-->
      <!--                    <span class="fa fa-search"></span>-->
      <!--                  </button>-->
      <!--                  <div class="find-pf-dropdown-container">-->
      <!--                    <input-->
      <!--                      type="text"-->
      <!--                      class="form-control"-->
      <!--                      id="find"-->
      <!--                      placeholder="Find By Keyword..."-->
      <!--                    />-->
      <!--                    <div class="find-pf-buttons">-->
      <!--                      <span class="find-pf-nums">1 of 3</span>-->
      <!--                      <button class="btn btn-link" type="button">-->
      <!--                        <span class="fa fa-angle-up"></span>-->
      <!--                      </button>-->
      <!--                      <button class="btn btn-link" type="button">-->
      <!--                        <span class="fa fa-angle-down"></span>-->
      <!--                      </button>-->
      <!--                      <button class="btn btn-link btn-find-close" type="button">-->
      <!--                        <span class="pficon pficon-close"></span>-->
      <!--                      </button>-->
      <!--                    </div>-->
      <!--                  </div>-->
      <!--                </div>-->
      <!--                <div class="form-group toolbar-pf-view-selector">-->
      <!--                  <button class="btn btn-link"><i class="fa fa-th"></i></button>-->
      <!--                  <button class="btn btn-link">-->
      <!--                    <i class="fa fa-th-large"></i>-->
      <!--                  </button>-->
      <!--                  <button class="btn btn-link">-->
      <!--                    <i class="fa fa-th-list"></i>-->
      <!--                  </button>-->
      <!--                </div>-->
      <!--              </div>-->
      <!--            </form>-->
      <!--            <div class="row toolbar-pf-results">-->
      <!--              <div class="col-sm-12">-->
      <!--                <h5>40 Results</h5>-->
      <!--                <p>Active filters:</p>-->
      <!--                <ul class="list-inline">-->
      <!--                  <li>-->
      <!--                    <span class="label label-info">-->
      <!--                      Name: nameofthething-->
      <!--                      <a href="#"><span class="fa fa-times"></span></a>-->
      <!--                    </span>-->
      <!--                  </li>-->
      <!--                  <li>-->
      <!--                    <span class="label label-info">-->
      <!--                      Name: nameofthething-->
      <!--                      <a href="#"><span class="fa fa-times"></span></a>-->
      <!--                    </span>-->
      <!--                  </li>-->
      <!--                  <li>-->
      <!--                    <span class="label label-info">-->
      <!--                      Name: nameofthething-->
      <!--                      <a href="#"><span class="fa fa-times"></span></a>-->
      <!--                    </span>-->
      <!--                  </li>-->
      <!--                </ul>-->
      <!--                <p><a href="#">Clear All Filters</a></p>-->
      <!--              </div>-->
      <!--              &lt;!&ndash; /col &ndash;&gt;-->
      <!--            </div>-->
      <!--            &lt;!&ndash; /row &ndash;&gt;-->
      <!--          </div>-->
      <!--          &lt;!&ndash; /col &ndash;&gt;-->
      <!--        </div>-->
      <!--        &lt;!&ndash; /row &ndash;&gt;-->
      <!--      </div>-->
      <!--      &lt;!&ndash; /container &ndash;&gt;-->

      <div class="container-fluid">
        <div
          id="pf-list-standard"
          class="list-group list-view-pf list-view-pf-view"
        >
          <!-- TODO: undo unset hack by fixing .list-group-item CSS in apiman.css -->
          <div
            class="list-group-item"
            style="max-width: unset"
            ng-repeat="notification in notificationSearchResult.beans"
          >
            <div class="list-view-pf-actions">
              {{ humanRelativeDate(notification.createdOn) }}
              <button
                class="btn btn-default fa fa-check"
                role="button"
                aria-label="Mark notification read"
                ng-click="markRead(notification)"
              ></button>
              <div class="dropdown pull-right dropdown-kebab-pf">
                <button
                  class="btn btn-link dropdown-toggle"
                  type="button"
                  id="dropdownKebabRight9"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="true"
                >
                  <span class="fa fa-ellipsis-v"></span>
                </button>
                <!--                <ul-->
                <!--                  class="dropdown-menu dropdown-menu-right"-->
                <!--                  aria-labelledby="dropdownKebabRight9"-->
                <!--                >-->
                <!--                  <li>-->
                <!--                    <a ng-click="deleteN"-->
                <!--                      ><span class="fa fa-minus-square"></span> Delete</a-->
                <!--                    >-->
                <!--                  </li>-->
                <!--                </ul>-->
              </div>
            </div>

            <div
              class="list-view-pf-main-info notification-main-body"
              ng-click="markRead(notification); goToEventLink(notification)"
            >
              <div class="list-view-pf-left">
                <span
                  class="fa {{ getNotificationMeta(notification).icon }}"
                ></span>
              </div>
              <div class="list-view-pf-body">
                <div class="list-view-pf-description">
                  <div class="list-group-item-heading">
                    <a href="{{ getNotificationMeta(notification).link }}">
                      {{ getNotificationMeta(notification).reason }}
                    </a>
                  </div>
                  <div class="list-group-item-text">
                    <a href="{{ getNotificationMeta(notification).link }}">
                      {{ getNotificationMeta(notification).message }}
                    </a>
                  </div>
                </div>
                <!--                  <div class="list-view-pf-additional-info">-->
                <!--                  <div class="list-view-pf-additional-info-item">-->
                <!--                    <span class="pficon pficon-screen"></span>-->
                <!--                    <strong>8</strong> Hosts-->
                <!--                  </div>-->
                <!--                  <div class="list-view-pf-additional-info-item">-->
                <!--                    <span class="pficon pficon-cluster"></span>-->
                <!--                    <strong>6</strong> Clusters-->
                <!--                  </div>-->
                <!--                  <div class="list-view-pf-additional-info-item">-->
                <!--                    <span class="pficon pficon-container-node"></span>-->
                <!--                    <strong>10</strong> Nodes-->
                <!--                  </div>-->
                <!--                  <div class="list-view-pf-additional-info-item">-->
                <!--                    <span class="pficon pficon-image"></span>-->
                <!--                    <strong>8</strong> Images-->
                <!--                  </div>-->
                <!--                  </div>-->
              </div>
            </div>
          </div>
        </div>
        <uib-pagination
          boundary-link-numbers="true"
          direction-links="true"
          force-ellipses="true"
          items-per-page="pageSize"
          max-size="50"
          ng-change="getNotificationsWithPagination(currentPage, pageSize)"
          ng-init="currentPage = 1"
          ng-model="currentPage"
          rotate="true"
          total-items="notificationSearchResult.totalSize"
        />
      </div>
    </div>
  </body>
</html>
